<style>
  .row > div i { color: #000; position: absolute; margin-top: 3px; transition: .3s ease }
  .row > div:hover i { font-size: 2.2em; margin-top: -5px }
  .row > div:hover .icon-name { color: #000 }
  .icon-name { display: inline-block; line-height: 32px; color: #aaa; margin-left: 35px; font-size: .8em; transition: .3s ease }
  .row > div:hover .icon-name { margin-left: 45px }
</style>
<div class="p-3">
  <h1>Themify Icons</h1>
  <h3>Arrows &amp; Direction Icons </h3>
  <div class="row px-2">
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-up"></i><span class="icon-name"> ti-arrow-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-right"></i><span class="icon-name"> ti-arrow-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-left"></i><span class="icon-name"> ti-arrow-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-down"></i><span class="icon-name"> ti-arrow-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrows-vertical"></i><span class="icon-name"> ti-arrows-vertical</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrows-horizontal"></i><span class="icon-name"> ti-arrows-horizontal</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-up"></i><span class="icon-name"> ti-angle-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-right"></i><span class="icon-name"> ti-angle-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-left"></i><span class="icon-name"> ti-angle-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-down"></i><span class="icon-name"> ti-angle-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-double-up"></i><span class="icon-name"> ti-angle-double-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-double-right"></i><span class="icon-name"> ti-angle-double-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-double-left"></i><span class="icon-name"> ti-angle-double-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-angle-double-down"></i><span class="icon-name"> ti-angle-double-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-move"></i><span class="icon-name"> ti-move</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-fullscreen"></i><span class="icon-name"> ti-fullscreen</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-top-right"></i><span class="icon-name"> ti-arrow-top-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-top-left"></i><span class="icon-name"> ti-arrow-top-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-circle-up"></i><span class="icon-name"> ti-arrow-circle-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-circle-right"></i><span class="icon-name"> ti-arrow-circle-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-circle-left"></i><span class="icon-name"> ti-arrow-circle-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrow-circle-down"></i><span class="icon-name"> ti-arrow-circle-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-arrows-corner"></i><span class="icon-name"> ti-arrows-corner</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-split-v"></i><span class="icon-name"> ti-split-v</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-split-v-alt"></i><span class="icon-name"> ti-split-v-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-split-h"></i><span class="icon-name"> ti-split-h</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-point-up"></i><span class="icon-name"> ti-hand-point-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-point-right"></i><span class="icon-name"> ti-hand-point-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-point-left"></i><span class="icon-name"> ti-hand-point-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-point-down"></i><span class="icon-name"> ti-hand-point-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-back-right"></i><span class="icon-name"> ti-back-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-back-left"></i><span class="icon-name"> ti-back-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-exchange-vertical"></i><span class="icon-name"> ti-exchange-vertical</span></div>
  </div>
  <h3>Web App Icons</h3>
  <div class="row px-2">
    <div class="col-md-3 col-sm-4"><i class="ti-wand"></i><span class="icon-name"> ti-wand</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-save"></i><span class="icon-name"> ti-save</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-save-alt"></i><span class="icon-name"> ti-save-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-direction"></i><span class="icon-name"> ti-direction</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-direction-alt"></i><span class="icon-name"> ti-direction-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-user"></i><span class="icon-name"> ti-user</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-link"></i><span class="icon-name"> ti-link</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-unlink"></i><span class="icon-name"> ti-unlink</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-trash"></i><span class="icon-name"> ti-trash</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-target"></i><span class="icon-name"> ti-target</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-tag"></i><span class="icon-name"> ti-tag</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-desktop"></i><span class="icon-name"> ti-desktop</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-tablet"></i><span class="icon-name"> ti-tablet</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-mobile"></i><span class="icon-name"> ti-mobile</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-email"></i><span class="icon-name"> ti-email</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-star"></i><span class="icon-name"> ti-star</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-spray"></i><span class="icon-name"> ti-spray</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-signal"></i><span class="icon-name"> ti-signal</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shopping-cart"></i><span class="icon-name"> ti-shopping-cart</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shopping-cart-full"></i><span class="icon-name"> ti-shopping-cart-full</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-settings"></i><span class="icon-name"> ti-settings</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-search"></i><span class="icon-name"> ti-search</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-zoom-in"></i><span class="icon-name"> ti-zoom-in</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-zoom-out"></i><span class="icon-name"> ti-zoom-out</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-cut"></i><span class="icon-name"> ti-cut</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-ruler"></i><span class="icon-name"> ti-ruler</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-ruler-alt-2"></i><span class="icon-name"> ti-ruler-alt-2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-ruler-pencil"></i><span class="icon-name"> ti-ruler-pencil</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-ruler-alt"></i><span class="icon-name"> ti-ruler-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bookmark"></i><span class="icon-name"> ti-bookmark</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bookmark-alt"></i><span class="icon-name"> ti-bookmark-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-reload"></i><span class="icon-name"> ti-reload</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-plus"></i><span class="icon-name"> ti-plus</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-minus"></i><span class="icon-name"> ti-minus</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-close"></i><span class="icon-name"> ti-close</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pin"></i><span class="icon-name"> ti-pin</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pencil"></i><span class="icon-name"> ti-pencil</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pencil-alt"></i><span class="icon-name"> ti-pencil-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-paint-roller"></i><span class="icon-name"> ti-paint-roller</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-paint-bucket"></i><span class="icon-name"> ti-paint-bucket</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-na"></i><span class="icon-name"> ti-na</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-medall"></i><span class="icon-name"> ti-medall</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-medall-alt"></i><span class="icon-name"> ti-medall-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-marker"></i><span class="icon-name"> ti-marker</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-marker-alt"></i><span class="icon-name"> ti-marker-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-lock"></i><span class="icon-name"> ti-lock</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-unlock"></i><span class="icon-name"> ti-unlock</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-location-arrow"></i><span class="icon-name"> ti-location-arrow</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout"></i><span class="icon-name"> ti-layout</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layers"></i><span class="icon-name"> ti-layers</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layers-alt"></i><span class="icon-name"> ti-layers-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-key"></i><span class="icon-name"> ti-key</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-image"></i><span class="icon-name"> ti-image</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-heart"></i><span class="icon-name"> ti-heart</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-heart-broken"></i><span class="icon-name"> ti-heart-broken</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-stop"></i><span class="icon-name"> ti-hand-stop</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-open"></i><span class="icon-name"> ti-hand-open</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hand-drag"></i><span class="icon-name"> ti-hand-drag</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-flag"></i><span class="icon-name"> ti-flag</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-flag-alt"></i><span class="icon-name"> ti-flag-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-flag-alt-2"></i><span class="icon-name"> ti-flag-alt-2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-eye"></i><span class="icon-name"> ti-eye</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-import"></i><span class="icon-name"> ti-import</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-export"></i><span class="icon-name"> ti-export</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-cup"></i><span class="icon-name"> ti-cup</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-crown"></i><span class="icon-name"> ti-crown</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-comments"></i><span class="icon-name"> ti-comments</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-comment"></i><span class="icon-name"> ti-comment</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-comment-alt"></i><span class="icon-name"> ti-comment-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-thought"></i><span class="icon-name"> ti-thought</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-clip"></i><span class="icon-name"> ti-clip</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-check"></i><span class="icon-name"> ti-check</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-check-box"></i><span class="icon-name"> ti-check-box</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-camera"></i><span class="icon-name"> ti-camera</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-announcement"></i><span class="icon-name"> ti-announcement</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-brush"></i><span class="icon-name"> ti-brush</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-brush-alt"></i><span class="icon-name"> ti-brush-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-palette"></i><span class="icon-name"> ti-palette</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-briefcase"></i><span class="icon-name"> ti-briefcase</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bolt"></i><span class="icon-name"> ti-bolt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bolt-alt"></i><span class="icon-name"> ti-bolt-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-blackboard"></i><span class="icon-name"> ti-blackboard</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bag"></i><span class="icon-name"> ti-bag</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-world"></i><span class="icon-name"> ti-world</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-wheelchair"></i><span class="icon-name"> ti-wheelchair</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-car"></i><span class="icon-name"> ti-car</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-truck"></i><span class="icon-name"> ti-truck</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-timer"></i><span class="icon-name"> ti-timer</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-ticket"></i><span class="icon-name"> ti-ticket</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-thumb-up"></i><span class="icon-name"> ti-thumb-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-thumb-down"></i><span class="icon-name"> ti-thumb-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-stats-up"></i><span class="icon-name"> ti-stats-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-stats-down"></i><span class="icon-name"> ti-stats-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shine"></i><span class="icon-name"> ti-shine</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shift-right"></i><span class="icon-name"> ti-shift-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shift-left"></i><span class="icon-name"> ti-shift-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shift-right-alt"></i><span class="icon-name"> ti-shift-right-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shift-left-alt"></i><span class="icon-name"> ti-shift-left-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shield"></i><span class="icon-name"> ti-shield</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-notepad"></i><span class="icon-name"> ti-notepad</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-server"></i><span class="icon-name"> ti-server</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pulse"></i><span class="icon-name"> ti-pulse</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-printer"></i><span class="icon-name"> ti-printer</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-power-off"></i><span class="icon-name"> ti-power-off</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-plug"></i><span class="icon-name"> ti-plug</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pie-chart"></i><span class="icon-name"> ti-pie-chart</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-panel"></i><span class="icon-name"> ti-panel</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-package"></i><span class="icon-name"> ti-package</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-music"></i><span class="icon-name"> ti-music</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-music-alt"></i><span class="icon-name"> ti-music-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-mouse"></i><span class="icon-name"> ti-mouse</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-mouse-alt"></i><span class="icon-name"> ti-mouse-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-money"></i><span class="icon-name"> ti-money</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-microphone"></i><span class="icon-name"> ti-microphone</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-menu"></i><span class="icon-name"> ti-menu</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-menu-alt"></i><span class="icon-name"> ti-menu-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-map"></i><span class="icon-name"> ti-map</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-map-alt"></i><span class="icon-name"> ti-map-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-location-pin"></i><span class="icon-name"> ti-location-pin</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-light-bulb"></i><span class="icon-name"> ti-light-bulb</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-info"></i><span class="icon-name"> ti-info</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-infinite"></i><span class="icon-name"> ti-infinite</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-id-badge"></i><span class="icon-name"> ti-id-badge</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-hummer"></i><span class="icon-name"> ti-hummer</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-home"></i><span class="icon-name"> ti-home</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-help"></i><span class="icon-name"> ti-help</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-headphone"></i><span class="icon-name"> ti-headphone</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-harddrives"></i><span class="icon-name"> ti-harddrives</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-harddrive"></i><span class="icon-name"> ti-harddrive</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-gift"></i><span class="icon-name"> ti-gift</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-game"></i><span class="icon-name"> ti-game</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-filter"></i><span class="icon-name"> ti-filter</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-files"></i><span class="icon-name"> ti-files</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-file"></i><span class="icon-name"> ti-file</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-zip"></i><span class="icon-name"> ti-zip</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-folder"></i><span class="icon-name"> ti-folder</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-envelope"></i><span class="icon-name"> ti-envelope</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-dashboard"></i><span class="icon-name"> ti-dashboard</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-cloud"></i><span class="icon-name"> ti-cloud</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-cloud-up"></i><span class="icon-name"> ti-cloud-up</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-cloud-down"></i><span class="icon-name"> ti-cloud-down</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-clipboard"></i><span class="icon-name"> ti-clipboard</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-calendar"></i><span class="icon-name"> ti-calendar</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-book"></i><span class="icon-name"> ti-book</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bell"></i><span class="icon-name"> ti-bell</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-basketball"></i><span class="icon-name"> ti-basketball</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bar-chart"></i><span class="icon-name"> ti-bar-chart</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-bar-chart-alt"></i><span class="icon-name"> ti-bar-chart-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-archive"></i><span class="icon-name"> ti-archive</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-anchor"></i><span class="icon-name"> ti-anchor</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-alert"></i><span class="icon-name"> ti-alert</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-alarm-clock"></i><span class="icon-name"> ti-alarm-clock</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-agenda"></i><span class="icon-name"> ti-agenda</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-write"></i><span class="icon-name"> ti-write</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-wallet"></i><span class="icon-name"> ti-wallet</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-video-clapper"></i><span class="icon-name"> ti-video-clapper</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-video-camera"></i><span class="icon-name"> ti-video-camera</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-vector"></i><span class="icon-name"> ti-vector</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-support"></i><span class="icon-name"> ti-support</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-stamp"></i><span class="icon-name"> ti-stamp</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-slice"></i><span class="icon-name"> ti-slice</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-shortcode"></i><span class="icon-name"> ti-shortcode</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-receipt"></i><span class="icon-name"> ti-receipt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pin2"></i><span class="icon-name"> ti-pin2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pin-alt"></i><span class="icon-name"> ti-pin-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pencil-alt2"></i><span class="icon-name"> ti-pencil-alt2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-eraser"></i><span class="icon-name"> ti-eraser</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-more"></i><span class="icon-name"> ti-more</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-more-alt"></i><span class="icon-name"> ti-more-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-microphone-alt"></i><span class="icon-name"> ti-microphone-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-magnet"></i><span class="icon-name"> ti-magnet</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-line-double"></i><span class="icon-name"> ti-line-double</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-line-dotted"></i><span class="icon-name"> ti-line-dotted</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-line-dashed"></i><span class="icon-name"> ti-line-dashed</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-ink-pen"></i><span class="icon-name"> ti-ink-pen</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-info-alt"></i><span class="icon-name"> ti-info-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-help-alt"></i><span class="icon-name"> ti-help-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-headphone-alt"></i><span class="icon-name"> ti-headphone-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-gallery"></i><span class="icon-name"> ti-gallery</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-face-smile"></i><span class="icon-name"> ti-face-smile</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-face-sad"></i><span class="icon-name"> ti-face-sad</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-credit-card"></i><span class="icon-name"> ti-credit-card</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-comments-smiley"></i><span class="icon-name"> ti-comments-smiley</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-time"></i><span class="icon-name"> ti-time</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-share"></i><span class="icon-name"> ti-share</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-share-alt"></i><span class="icon-name"> ti-share-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-rocket"></i><span class="icon-name"> ti-rocket</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-new-window"></i><span class="icon-name"> ti-new-window</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-rss"></i><span class="icon-name"> ti-rss</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-rss-alt"></i><span class="icon-name"> ti-rss-alt</span></div>
  </div>
  <h3>Control Icons</h3>
  <div class="row px-2">
    <div class="col-md-3 col-sm-4"><i class="ti-control-stop"></i><span class="icon-name"> ti-control-stop</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-shuffle"></i><span class="icon-name"> ti-control-shuffle</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-play"></i><span class="icon-name"> ti-control-play</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-pause"></i><span class="icon-name"> ti-control-pause</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-forward"></i><span class="icon-name"> ti-control-forward</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-backward"></i><span class="icon-name"> ti-control-backward</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-volume"></i><span class="icon-name"> ti-volume</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-skip-forward"></i><span class="icon-name"> ti-control-skip-forward</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-skip-backward"></i><span class="icon-name"> ti-control-skip-backward</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-record"></i><span class="icon-name"> ti-control-record</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-control-eject"></i><span class="icon-name"> ti-control-eject</span></div>
  </div>
  <h3>Text Editor</h3>
  <div class="row px-2">
    <div class="col-md-3 col-sm-4"><i class="ti-paragraph"></i><span class="icon-name"> ti-paragraph</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-uppercase"></i><span class="icon-name"> ti-uppercase</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-underline"></i><span class="icon-name"> ti-underline</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-text"></i><span class="icon-name"> ti-text</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-Italic"></i><span class="icon-name"> ti-Italic</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-smallcap"></i><span class="icon-name"> ti-smallcap</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-list"></i><span class="icon-name"> ti-list</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-list-ol"></i><span class="icon-name"> ti-list-ol</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-align-right"></i><span class="icon-name"> ti-align-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-align-left"></i><span class="icon-name"> ti-align-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-align-justify"></i><span class="icon-name"> ti-align-justify</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-align-center"></i><span class="icon-name"> ti-align-center</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-quote-right"></i><span class="icon-name"> ti-quote-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-quote-left"></i><span class="icon-name"> ti-quote-left</span></div>
  </div>
  <h3>Layout Icons</h3>
  <div class="row px-2">
    <div class="col-md-3 col-sm-4"><i class="ti-layout-width-full"></i><span class="icon-name"> ti-layout-width-full</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-width-default"></i><span class="icon-name"> ti-layout-width-default</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-width-default-alt"></i><span class="icon-name"> ti-layout-width-default-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-tab"></i><span class="icon-name"> ti-layout-tab</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-tab-window"></i><span class="icon-name"> ti-layout-tab-window</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-tab-v"></i><span class="icon-name"> ti-layout-tab-v</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-tab-min"></i><span class="icon-name"> ti-layout-tab-min</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-slider"></i><span class="icon-name"> ti-layout-slider</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-slider-alt"></i><span class="icon-name"> ti-layout-slider-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-sidebar-right"></i><span class="icon-name"> ti-layout-sidebar-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-sidebar-none"></i><span class="icon-name"> ti-layout-sidebar-none</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-sidebar-left"></i><span class="icon-name"> ti-layout-sidebar-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-placeholder"></i><span class="icon-name"> ti-layout-placeholder</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-menu"></i><span class="icon-name"> ti-layout-menu</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-menu-v"></i><span class="icon-name"> ti-layout-menu-v</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-menu-separated"></i><span class="icon-name"> ti-layout-menu-separated</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-menu-full"></i><span class="icon-name"> ti-layout-menu-full</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-right"></i><span class="icon-name"> ti-layout-media-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-right-alt"></i><span class="icon-name"> ti-layout-media-right-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-overlay"></i><span class="icon-name"> ti-layout-media-overlay</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-overlay-alt"></i><span class="icon-name"> ti-layout-media-overlay-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-overlay-alt-2"></i><span class="icon-name"> ti-layout-media-overlay-alt-2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-left"></i><span class="icon-name"> ti-layout-media-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-left-alt"></i><span class="icon-name"> ti-layout-media-left-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-center"></i><span class="icon-name"> ti-layout-media-center</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-media-center-alt"></i><span class="icon-name"> ti-layout-media-center-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-list-thumb"></i><span class="icon-name"> ti-layout-list-thumb</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-list-thumb-alt"></i><span class="icon-name"> ti-layout-list-thumb-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-list-post"></i><span class="icon-name"> ti-layout-list-post</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-list-large-image"></i><span class="icon-name"> ti-layout-list-large-image</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-line-solid"></i><span class="icon-name"> ti-layout-line-solid</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid4"></i><span class="icon-name"> ti-layout-grid4</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid3"></i><span class="icon-name"> ti-layout-grid3</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid2"></i><span class="icon-name"> ti-layout-grid2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid2-thumb"></i><span class="icon-name"> ti-layout-grid2-thumb</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-cta-right"></i><span class="icon-name"> ti-layout-cta-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-cta-left"></i><span class="icon-name"> ti-layout-cta-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-cta-center"></i><span class="icon-name"> ti-layout-cta-center</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-cta-btn-right"></i><span class="icon-name"> ti-layout-cta-btn-right</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-cta-btn-left"></i><span class="icon-name"> ti-layout-cta-btn-left</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-column4"></i><span class="icon-name"> ti-layout-column4</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-column3"></i><span class="icon-name"> ti-layout-column3</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-column2"></i><span class="icon-name"> ti-layout-column2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-accordion-separated"></i><span class="icon-name"> ti-layout-accordion-separated</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-accordion-merged"></i><span class="icon-name"> ti-layout-accordion-merged</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-accordion-list"></i><span class="icon-name"> ti-layout-accordion-list</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-widgetized"></i><span class="icon-name"> ti-widgetized</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-widget"></i><span class="icon-name"> ti-widget</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-widget-alt"></i><span class="icon-name"> ti-widget-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-view-list"></i><span class="icon-name"> ti-view-list</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-view-list-alt"></i><span class="icon-name"> ti-view-list-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-view-grid"></i><span class="icon-name"> ti-view-grid</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-upload"></i><span class="icon-name"> ti-upload</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-download"></i><span class="icon-name"> ti-download</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-loop"></i><span class="icon-name"> ti-loop</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-sidebar-2"></i><span class="icon-name"> ti-layout-sidebar-2</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid4-alt"></i><span class="icon-name"> ti-layout-grid4-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid3-alt"></i><span class="icon-name"> ti-layout-grid3-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-grid2-alt"></i><span class="icon-name"> ti-layout-grid2-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-column4-alt"></i><span class="icon-name"> ti-layout-column4-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-column3-alt"></i><span class="icon-name"> ti-layout-column3-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-layout-column2-alt"></i><span class="icon-name"> ti-layout-column2-alt</span></div>
  </div>
  <h3>Brand Icons</h3>
  <div class="row px-2">
    <div class="col-md-3 col-sm-4"><i class="ti-flickr"></i><span class="icon-name"> ti-flickr</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-flickr-alt"></i><span class="icon-name"> ti-flickr-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-instagram"></i><span class="icon-name"> ti-instagram</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-google"></i><span class="icon-name"> ti-google</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-github"></i><span class="icon-name"> ti-github</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-facebook"></i><span class="icon-name"> ti-facebook</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-dropbox"></i><span class="icon-name"> ti-dropbox</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-dropbox-alt"></i><span class="icon-name"> ti-dropbox-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-dribbble"></i><span class="icon-name"> ti-dribbble</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-apple"></i><span class="icon-name"> ti-apple</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-android"></i><span class="icon-name"> ti-android</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-yahoo"></i><span class="icon-name"> ti-yahoo</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-trello"></i><span class="icon-name"> ti-trello</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-stack-overflow"></i><span class="icon-name"> ti-stack-overflow</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-soundcloud"></i><span class="icon-name"> ti-soundcloud</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-sharethis"></i><span class="icon-name"> ti-sharethis</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-sharethis-alt"></i><span class="icon-name"> ti-sharethis-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-reddit"></i><span class="icon-name"> ti-reddit</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-microsoft"></i><span class="icon-name"> ti-microsoft</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-microsoft-alt"></i><span class="icon-name"> ti-microsoft-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-linux"></i><span class="icon-name"> ti-linux</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-jsfiddle"></i><span class="icon-name"> ti-jsfiddle</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-joomla"></i><span class="icon-name"> ti-joomla</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-html5"></i><span class="icon-name"> ti-html5</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-css3"></i><span class="icon-name"> ti-css3</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-drupal"></i><span class="icon-name"> ti-drupal</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-wordpress"></i><span class="icon-name"> ti-wordpress</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-tumblr"></i><span class="icon-name"> ti-tumblr</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-tumblr-alt"></i><span class="icon-name"> ti-tumblr-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-skype"></i><span class="icon-name"> ti-skype</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-youtube"></i><span class="icon-name"> ti-youtube</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-vimeo"></i><span class="icon-name"> ti-vimeo</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-vimeo-alt"></i><span class="icon-name"> ti-vimeo-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-twitter"></i><span class="icon-name"> ti-twitter</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-twitter-alt"></i><span class="icon-name"> ti-twitter-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-linkedin"></i><span class="icon-name"> ti-linkedin</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pinterest"></i><span class="icon-name"> ti-pinterest</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-pinterest-alt"></i><span class="icon-name"> ti-pinterest-alt</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-themify-logo"></i><span class="icon-name"> ti-themify-logo</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-themify-favicon"></i><span class="icon-name"> ti-themify-favicon</span></div>
    <div class="col-md-3 col-sm-4"><i class="ti-themify-favicon-alt"></i><span class="icon-name"> ti-themify-favicon-alt</span></div>
  </div>
</div>